<template>
  <div>
    <!-- <i class="el-icon-user-solid">123132132</i>   -->
    <i class="el-icon-edit"></i>

   
    <!-- 走马灯 -->
    <el-carousel @change="carouselListen" ref="carousel" indicator-position="none" height="100vh" direction="vertical" :autoplay="false">
      <el-carousel-item v-for="image in images" :key="image">
        <div class="main-body" :style="{height: '100vh',width: '100vw',background: 'no-repeat center  '+`url(${image})`,'background-size': 'cover'}">
          <div class="center-body">
            <div class="center-text">
              <div class="title">绿色地球，净化未来</div>
              <div class="sub-title">
                让每一次点击都成为减碳的力量
              </div>
            </div>
            <div class="card-container" style="background-size: cover;">
              <HomeCard title="新闻资讯" :category="5" :source-data="bidData1"></HomeCard>
              <span style="display: block;height: 10px;"></span>
              <HomeCard title="公告变更" :category="6" :source-data="bidData2"></HomeCard>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <!-- 控制器 -->
    <div class="point">
      <div class="up" v-show="activeIndex!==0" @click="changeCarousel('up')">
        <el-icon class="el-icon-upload2"><Upload /></el-icon>
      </div>
      <div class="down" v-show="activeIndex!==images?.length-1" @click="changeCarousel('down')">
        <el-icon class="el-icon-download"><Download /></el-icon>
      </div>
    </div>
    <!-- 搜索弹窗 -->
    <el-dialog v-model="searchDialogOpenState">
      <el-input v-model="keyword" @change="handleSearch">
        <template #append>
          <el-button @click="handleSearch">搜索</el-button>
        </template>
      </el-input>
      <ul v-if="searchResult.length > 0" style="list-style: none; max-height: 60vh; overflow-y: auto; scrollbar-gutter: stable;">
        <li v-for="bidding in searchResult" @click="jumpTo(bidding.id)" class="item">{{ bidding.bidTitle }}</li>
      </ul>
      <div v-else>无内容请搜索</div>
    </el-dialog>
    <!-- 悬浮球 -->
    <DragButton ></DragButton>
  </div>
</template>

<script setup>
import HomeCard from '@/components/Platform/HomeCard.vue'
import DragButton  from '@/components/DragButton/index.vue'
// 引入Swiper组件和样式
import {listBidding} from '@/api/bid/bidding'
import {listBanner} from '@/api/bid/banner'
import { getBaseUrl } from '@/utils/env'

const router = useRouter();

const images = ref(0)
const bidData1 = ref(null)
const bidData2 = ref(null)
const searchDialogOpenState = ref(false)
const keyword = ref('')
const searchResult = ref([])
const activeIndex = ref(0)
const carousel = ref(null)

const getData = async() => {
  // images.value = (await listBanner()).rows.map(it => {
  //   it.url =  getBaseUrl() + it.url
  //   return it
  // })

  images.value =['https://ts1.cn.mm.bing.net/th/id/R-C.16aaadbf56e6a92ffde3ff373d2b8a0f?rik=WD63loK8AcZfcg&riu=http%3a%2f%2fwww.cas.ac.cn%2fzt%2fkjzt%2fstxd%2fgd%2f202205%2fW020220505327370483024.jpg&ehk=IA9lSDLVCxam1eMzzf8zS4D3z%2b2YH6LjhVIaoueV7lM%3d&risl=&pid=ImgRaw&r=0',
    "https://bpic.588ku.com/back_pic/19/03/15/7f3f18e4cecd5a2f1a41a3a12d61e403.jpg",
  'https://tse1-mm.cn.bing.net/th/id/OIP-C.J9o3mqckmPAZdTfBKQIDMwAAAA?rs=1&pid=ImgDetMain']

  console.log(images.value, 888)
  console.log("listBidding",listBidding({category: 3}))
  bidData1.value = (await listBidding({category: 5})).rows
  bidData2.value = (await listBidding({category: 6})).rows
}

const handleSearch = async() => {
  console.log("keyword",keyword.value)
  searchResult.value = (await listBidding({bidTitle: keyword.value})).rows
  console.log("search",searchResult.value)
}

const jumpTo = (id) => {
  router.push(`/bid/detail?id=${id}`)
}

const changeCarousel = (val) => {
  console.log("carousel",carousel.value.prev)
  console.log("next",carousel.value.next)
  val==='up'?carousel.value.prev():carousel.value.next()
}

const carouselListen = (index) => {
  activeIndex.value=index
}

onMounted(()=>{
  getData()
  document.documentElement.addEventListener('keydown', (e) => {
    if (e.ctrlKey && e.key === 'k') {
      e.preventDefault()
      searchDialogOpenState.value = true
    }
  })
})
</script>

<style scoped lang="scss">

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  margin: 0;
}

.card-container {
  margin-top: 20px;
}

@media screen and (max-width: 540px) {
  .card-container {
    width: 100%;
    padding: 0;
    grid-template-columns: 1fr;
  }
}

.item:hover {
  color: #1AD0B6;
}
.center-body{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10vw;
}
.center-text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  
  .sub-title{
    font-size: 40px;
    color: black;


  }
  .title{
    color: black;
    font-size: 60px;
    font-weight: bold;
  }
}
.point{
  position: fixed;
  z-index: 9999;
  top: 50vh;
  right: 0;
  margin-right: 20px;
  .up{
    width: 40px;
    height: 40px;
    .el-icon-upload2{
      font-size: 40px;
      color: #FFFFFF;
    }
  }
  .down{
    width: 40px;
    height: 40px;
    .el-icon-download{
      font-size: 40px;
      color: #FFFFFF;
    }
  }
}
</style>


